<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物那些事 - 登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4ade80',
                        secondary: '#166534',
                        accent: '#fbbf24',
                        neutral: '#f3f4f6',
                        'neutral-dark': '#374151'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-300;
            }
        }
    </style>
</head>
<body class="bg-gray-100 font-sans text-neutral-dark min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-paw text-primary text-3xl"></i>
                <h1 class="text-2xl font-bold text-secondary">宠物那些事</h1>
            </div>
            <nav class="hidden md:flex space-x-6">
                <a href="./pet_forum.html" class="font-medium hover:text-primary transition-colors">论坛首页</a>
                <a href="./features.html" class="font-medium hover:text-primary transition-colors">平台特色</a>
                <a href="./adoption.html" class="font-medium hover:text-primary transition-colors">宠物领养</a>
                <a href="./services.html" class="font-medium hover:text-primary transition-colors">宠物服务</a>
                <a href="./about.html" class="font-medium hover:text-primary transition-colors">关于我们</a>
                <a href="./login.html" class="font-medium text-primary transition-colors">登录</a>
            </nav>
            <button class="md:hidden text-neutral-dark text-xl">
                <i class="fa fa-bars"></i>
            </button>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="flex-grow flex items-center justify-center py-12 px-4">
        <div class="w-full max-w-md">
            <div class="text-center mb-8">
                <h2 class="text-3xl font-bold mb-2">欢迎登录</h2>
                <p class="text-gray-500">请输入您的账号信息登录</p>
            </div>
            <div class="bg-white rounded-2xl shadow-lg p-8 card-shadow">
                <form id="loginForm">
                    <div class="mb-6">
                        <label for="username" class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-user text-gray-400"></i>
                            </div>
                            <input type="text" id="username" class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none input-focus" placeholder="请输入用户名" required>
                        </div>
                    </div>
                    <div class="mb-6">
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-2">密码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-lock text-gray-400"></i>
                            </div>
                            <input type="password" id="password" class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none input-focus" placeholder="请输入密码" required>
                        </div>
                    </div>
                    <div class="flex items-center justify-between mb-6">
                        <div class="flex items-center">
                            <input id="remember" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                            <label for="remember" class="ml-2 block text-sm text-gray-600">记住我</label>
                        </div>
                        <a href="#" class="text-sm text-primary hover:text-secondary transition-colors">忘记密码?</a>
                    </div>
                    <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-colors mb-4">
                        登录
                    </button>
                    <div class="text-center">
                        <p class="text-gray-600">还没有账号? <a href="#" class="text-primary hover:text-secondary transition-colors">立即注册</a></p>
                    </div>
                </form>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-secondary text-white py-8">
        <div class="container mx-auto px-4">
            <div class="text-center">
                <p>&copy; 2023 宠物那些事 - 宠物爱好者社区 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 登录表单处理
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const remember = document.getElementById('remember').checked;

            // 简单表单验证
            if (!username || !password) {
                alert('请输入用户名和密码');
                return;
            }

            // 模拟登录成功
            localStorage.setItem('currentUser', JSON.stringify({
                username: username,
                remember: remember
            }));

            // 跳转到论坛首页
            window.location.href = './pet_forum.html';
        });

        // 检查是否已登录
        document.addEventListener('DOMContentLoaded', function() {
            const user = localStorage.getItem('currentUser');
            if (user) {
                // 如果已登录，修改导航栏显示
                const navLinks = document.querySelectorAll('nav a');
                navLinks.forEach(link => {
                    if (link.textContent === '登录') {
                        link.textContent = '退出登录';
                        link.addEventListener('click', function(e) {
                            e.preventDefault();
                            localStorage.removeItem('currentUser');
                            window.location.reload();
                        });
                    }
                });
            }
        });
    </script>
</body>
</html>